<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>新增收货地址</title>
    <script src="__INDEX__/js/mui.min.js"></script>
    <link href="__INDEX__/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="__INDEX__/css/iconfont.css" />
    <link rel="stylesheet" href="__INDEX__/css/style.css" />
    <link rel="stylesheet" href="__INDEX__/css/yund.css" />
</head>
<style>
	.agent_address{
		    width: 18%;
	}
	.layui-form-item .layui-input-block .layui-unselect {
	    width: 85px;
	}
	.layui-form-item .layui-input-block .layui-unselect em {
	        width: 65%;
	}
	
	.layui-form-item .layui-input-block .layui-form-onswitch i{
		float: right;
		left: 75%;
	}
	
	 .address_content .mui-input-row .mui-input-group {
	    padding: 0;
	    width: 75%;
	    text-align: left;
	}
</style>
<body onload="loadProvince()">
	<header class="mui-bar mui-bar-nav public-color">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="JavaScript:history.go(-1)"></a>
		<h1 class="mui-title">新增收货地址</h1>
		<a href="javascript:;" onclick="save_address()" class=" mui-pull-right edit" id="btn">保存</a>
	</header>
	<div class="mui-content address_content" id="update_div">
		<form class="layui-form mui-input-group address_group" id='my_form'>
			<div class="mui-input-row ">
				<label>收货人</label>
				<input id="consignee" name='consignee' type="text" class="mui-input-group" placeholder="收货人姓名" >				
			</div>
			<div class="mui-input-row">
				<label>联系电话</label>
				<input id="mobile" name="mobile" type="text" class="mui-input-group" placeholder="收货人电话">				
			</div>
			<div class="layui-form-item address mui-input-row">
				<label class="layui-form-label " style="width: 18%;text-align: left;">所在地区</label>
				<input type="hidden" name="district" id='district'>
				<input type="hidden" name="city" id='city'>
				<input type="hidden" name="province" id='province'>
				<select lay-ignore   lay-verify="required"  id="countryS" style="margin-left: 10px;width: 25%;">
				  <option value="">请选择区县</option>
				</select> 
				<select lay-ignore   lay-verify="required"  id="cityS" onchange="loadCounty()" style="margin-left: 10px;width: 25%;">
				  <option value="">请选择城市</option>
				</select> 
				<select lay-ignore   lay-verify="required"  id="proS" onchange="loadCity()"  style="width: 25%;">
				  <option value="" >请选择省份</option>
				</select> 
			</div>
			<div class="mui-input-row">
				<label>详细地址</label>
				<input type="text" id="address" name="address" class="mui-input-group" placeholder="街道 小区">				
			</div>
			<div class="layui-form-item">
		    <div class="layui-input-block"  style="float: right;margin-right: 5%;">
		      <input id='is_default' type="checkbox" checked="" name="is_default" lay-skin="switch" lay-filter="my_switch" lay-text="设为默认|取消默认">
		    </div>
	 </form>
	</div>
	
</body>
</html>
{include file="public/footer" /}
<script 	  type="text/javascript" src="__PUBLIC__/static/js/pro.js"></script>
<script async type="text/javascript" src="__PUBLIC__/static/js/city.js"></script>
<script async type="text/javascript" src="__PUBLIC__/static/js/country.js"></script>
<script async type="text/javascript" src="__PUBLIC__/static/js/town.js"></script>
<script>
	//图片上传
	layui.use(['form'], function(){
  		var $ = layui.jquery,form = layui.form;
		
		//监听开关
		form.on('switch(my_switch)', function(data){
		  if(data.value == "on"){
		  	$('#is_default').val(2);
		  }
		});
		
	});
	
	function save_address(){
		if($("#consignee").val()==''){
			layer.msg("请填写收货人信息!");
			return false;
		}
		if($("#mobile").val()==''){
			layer.msg("请填写收货人联系电话!");
			return false;
		}
		if($("#address").val()==''){
			layer.msg("请填写收货地址!");
			return false;
		}
		var province_tilte = $("#proS").find("option:selected").text(); 
		$('#province').val(province_tilte);
		
		var city_tilte = $("#cityS").find("option:selected").text(); 
		$('#city').val(city_tilte);
		
		var district_tilte = $("#countryS").find("option:selected").text(); 
		$('#district').val(district_tilte);
		
		
		$.ajax({
			type:"post",
			url: "{:url('member/address_add')}",
			data: $('#my_form').serialize(),//表单数据
			success: function(data) {
				layer.msg(data.msg, {
				  icon: 1,
				  time: 1500 //2秒关闭（如果不配置，默认是3秒）
				}, function(){
					  if(data.code == 200) {
							location.href = data.url
					  }
				}); 
			}
		})
	}
	
</script>


<script type="text/javascript">
			var proS=document.getElementById("proS"),
				cityS=document.getElementById("cityS"),
				countryS=document.getElementById("countryS");
			function loadProvince(){
				var tempFragment = document.createDocumentFragment();
				for(var i=0;i<proData_.length;i++){
					var option=document.createElement("option");
					option.setAttribute("value",proData_[i].pk);
					option.setAttribute("calss",'layui-select-title');
					option.innerHTML=proData_[i].pv;
					tempFragment.appendChild(option);
				}
				//使用dom碎片，减少对dom的重复操作
				proS.appendChild(tempFragment);
			}
			function loadCity(){
				if(proS.value==0){
					return;
				}else{
					cityS.innerHTML="<option value='0'>请选择</option>";
					countryS.innerHTML="<option value='0'>请选择</option>";
					var hasFound=false;
					var tempFragment = document.createDocumentFragment();
					for(var i=0;i<cityData_.length;i++){
						if(proS.value==cityData_[i].pk){
							hasFound=true;
							var option=document.createElement("option");
							option.setAttribute("value",cityData_[i].ck);
							option.setAttribute("calss",'layui-select-title');
							option.innerHTML=cityData_[i].cv;
							tempFragment.appendChild(option);
							
						}else{
							//需要查找的数据都是放一块的，如果匹配过，又出现不匹配，那么之后数据肯定都是不匹配的。可以pass掉，减少循环次数
							if(hasFound){
								break;
							}
						}
					}
					cityS.appendChild(tempFragment);
				}
			}
			function loadCounty(){
				if(cityS.value==0){
					return;
				}else{
					countryS.innerHTML="<option value='0'>请选择</option>";
					var hasFound=false;
					var tempFragment = document.createDocumentFragment();
					for(var i=0;i<countryData_.length;i++){
						if(cityS.value==countryData_[i].ck){
							hasFound=true;
							var option=document.createElement("option");
							option.setAttribute("value",countryData_[i].cyk);
							option.setAttribute("calss",'layui-select-title');
							option.innerHTML=countryData_[i].cyv;
							tempFragment.appendChild(option);
							
						}else{
							if(hasFound){
								break;
							}
						}
					}
					countryS.appendChild(tempFragment);
				}
			}
</script>